<template>
	<view class="main-box">
		<view class="info-box">
			<view class="avatar-box">
				<u-avatar @click="editUser" size="160" :src="isLogin ? userInfo.avatar : ''"></u-avatar>
				<view class="nickname-box">
					<view class="vip-box">
						<view class="nickname">{{ userInfo?.nickname || nickname }}</view>
						<!-- <image class="vip-img" src="@/static/images/vip.png"></image> -->
					</view>
					<view class="id-box" @click="onCopy(userInfo.id)">
						<text class="text">ID: {{ userInfo?.id || 88888 }}</text>
						<u-icon v-if="userInfo.id" name="outline-copy" custom-prefix="iconfont" size="28"></u-icon>
					</view>
					<view class="tag-box">
						<view class="tag-btn" @click="wallet">
							<image class="icon-img" src="https://rbtnet.oss-cn-hangzhou.aliyuncs.com/734147201a9ea897d237b4f7586038a9e19d06e24b4b224a6fcc4972bb96bcce.png"></image>
							<text>趣币</text>
						</view>
						<!-- <view class="tag-btn">
							<image class="icon-img" src="@/static/images/shop.png"></image>
							<text>礼物</text>
						</view> -->
						<view class="tag-btn" @click="point">
							<image class="icon-img" src="https://rbtnet.oss-cn-hangzhou.aliyuncs.com/ab8540e145165ed31ba32f8673cc3e6bddf72161b20789a7c0ecfc36fcbf67d8.png"></image>
							<text>积分</text>
						</view>
						<view class="tag-btn" @click="toTrend">
							<image class="icon-img" src="https://rbtnet.oss-cn-hangzhou.aliyuncs.com/06d4ac22b8acbdb021f698531ddc0091f8b1a4c1b938c4189025edccc7a4beed.png"></image>
							<text>动态</text>
						</view>
						<view class="tag-btn" @click="toGift">
							<text>礼物</text>
							<u-icon name="arrow-right" size="20" color="#aaa"></u-icon>
						</view>
					</view>
				</view>
			</view>
			
			<!-- <view class="fans-box">
				<view class="tag">
					<text class="tag-num">2.3万</text>
					<text>获赞</text>
				</view>
				<view class="tag">
					<text class="tag-num">22.3万</text>
					<text>关注</text>
				</view>
				<view class="tag">
					<text class="tag-num">223.3万</text>
					<text>粉丝</text>
				</view>
				<view class="tag">
					<text class="tag-num">1000.3万</text>
					<text>信用分</text>
				</view>
			</view> -->
			
			<!-- <view class="vip-box">
				<vip-card></vip-card>
			</view> -->
			
		</view>
		
		<view class="card-box" v-if="isPass">
			<view class="title">我的订单</view>
			<view class="card-item">
				<view class="item" @click="myOrder(1)">
					<u-icon name="outline-empty-wallet-time" custom-prefix="iconfont" size="50"></u-icon>
					<view class="name">待付款</view>
					<tui-badge v-if="numData.orderCount['unpaidCount'] > 0" absolute top="30rpx" right="30rpx" :scaleRatio="0.8" type="green">{{numData.orderCount['unpaidCount']}}</tui-badge>
				</view>
				
				<view class="item" @click="myOrder(2)">
					<u-icon name="outline-timer-1" custom-prefix="iconfont" size="50"></u-icon>
					<view class="name">待服务</view>
				</view>
				
				<view class="item" @click="myOrder(3)">
					<u-icon name="outline-timer-start" custom-prefix="iconfont" size="50"></u-icon>
					<view class="name">服务中</view>
				</view>
				
				<view class="item" @click="myOrder(4)">
					<u-icon name="vuesax-outline-task-square" custom-prefix="iconfont" size="50"></u-icon>
					<view class="name">已完成</view>
				</view>
			</view>
		</view>
		
		<view class="card-box" v-if="isPass && peiwanEnabled && clerk.id > 0">
			<view class="title">接单中心</view>
			<view class="card-item">
				
				<view class="item" @click="receiveOrder">
					<u-icon name="jiedan" custom-prefix="iconfont" size="50"></u-icon>
					<view class="name">接单中心</view>
				</view>
				
				<view class="item" @click="blindOrder">
					<u-icon name="snatch" custom-prefix="iconfont" size="56"></u-icon>
					<view class="name">抢单中心</view>
				</view>
				
				<view class="item" @click="workerList">
					<u-icon name="dianyuan" custom-prefix="iconfont" size="50"></u-icon>
					<view class="name">达人列表</view>
				</view>
				
				<view class="item" @click="reward">
					<u-icon name="zhaopiandashangjilu" custom-prefix="iconfont" size="50"></u-icon>
					<view class="name">打赏记录</view>
				</view>
				
				<!-- <view class="item">
					<u-icon name="shimingrenzheng" custom-prefix="iconfont" size="50"></u-icon>
					<view class="name">实名认证</view>
				</view> -->
				
			</view>
		</view>
		
		<view class="card-box">
			<view class="title">常用工具</view>
			
			<view class="card-item">
				<!-- <view class="item">
					<u-icon name="dashang" custom-prefix="iconfont" size="50"></u-icon>
					<view class="name">打赏店员</view>
				</view> -->
				
				<view class="item" v-if="isPass && peiwanEnabled" @click="toApply">
					<u-icon name="dianyuan1" custom-prefix="iconfont" size="50"></u-icon>
					<view class="name">达人申请</view>
				</view>
				
				<view v-if="brokerageEnabled" class="item" @click="fenxiao">
					<u-icon name="fenxiaozhongxin2" custom-prefix="iconfont" size="50"></u-icon>
					<view class="name">分销中心</view>
				</view>
				
				<view class="item" @click="sign">
					<u-icon name="calendar" size="50"></u-icon>
					<view class="name">签到有礼</view>
				</view>
				
				<view class="item" @click="toFans">
					<u-icon name="xingxing" custom-prefix="iconfont" size="50"></u-icon>
					<view class="name">收藏达人</view>
				</view>
				
				<view class="item" @click="youhuiquan">
					<u-icon name="youhuiquan" custom-prefix="iconfont" size="50"></u-icon>
					<view class="name">优惠券</view>
				</view>
				
				<view class="item" @click="toChat">
					<u-icon name="kefuzhongxin" custom-prefix="iconfont" size="50"></u-icon>
					<view class="name">联系客服</view>
				</view>
				
				<view class="item" @click="toKaidian">
					<u-icon name="kaidian" custom-prefix="iconfont" size="50"></u-icon>
					<view class="name">搭建同款</view>
				</view>
				
				<view class="item" @click="cashApply">
					<u-icon name="tixian" custom-prefix="iconfont" size="50"></u-icon>
					<view class="name">申请提现</view>
				</view>
				
				<!-- <view class="item">
					<u-icon name="mianfei-liwutujian" custom-prefix="iconfont" size="50"></u-icon>
					<view class="name">礼物图鉴</view>
				</view>
				
				<view class="item">
					<u-icon name="kaidian" custom-prefix="iconfont" size="50"></u-icon>
					<view class="name">我要开店</view>
				</view>
				
				<view class="item">
					<u-icon name="outline-timer-1" custom-prefix="iconfont" size="50"></u-icon>
					<view class="name">合作推广</view>
				</view> -->
				
			</view>
			
			
			
		</view>
		
	</view>
</template>

<script>
	import sheep from '@/sheep'; 
	import tuiBadge from "@/components/thorui/tui-badge/tui-badge.vue";
	import VipCard from '@/pages/tabbar/components/mine/vipCard.vue';
	import { showAuthModal } from '@/sheep/hooks/useModal';
	export default {
		components: {
			VipCard, 
			tuiBadge,
		},
		data() {
			return {
				nickname: '请先登陆',
			}
		},
		computed: {
			userInfo: {
			    get() {
			      return sheep.$store('user').userInfo;
			    },
			},
			isLogin: {
				get() {
				  return sheep.$store('user').isLogin;
				},
			},
			numData: {
				get() {
				  return sheep.$store('user').numData;
				},
			},
			clerk() {
				return sheep.$store('sys').currentClerk;
			},
			brokerageEnabled() {
				return sheep.$store('user').tradeConfig.brokerageEnabled;
			},
			peiwanEnabled() {
				return sheep.$store('user').tradeConfig.peiwanEnabled;
			},
			friendEnabled() {
				return sheep.$store('user').tradeConfig.friendEnabled
			},
			isPass() {
				return sheep.$store('user').tradeConfig.weixinEnabled;
			},
		},
		methods: {
			toApply() {
				uni.showModal({
				  title: '达人申请',
				  content: '请确认是否成年，未成年禁止申请，申请后会有客服添加进行微信实名认证！',
				  success: function (res) {
				    if (res.confirm) {
				      sheep.$router.go('/pages/worker/workerList/index');
				    }
				  },
				});
			},
			toFans() {
				sheep.$router.go('/pages/clerk/fans/list');
			},
			receiveOrder() {
				sheep.$router.go('/pages/order/worker/list');
			},
			blindOrder() {
				sheep.$router.go('/pages/order/blind/list');
			},
			myOrder(type) {
				sheep.$router.go('/pages/order/my/list', {type: type});
			},
			cashApply() {
				sheep.$router.go('/pages/commission/wallet');
			},
			fenxiao() {
				uni.showModal({
				  title: '分销申请',
				  content: '点击邀请海报，生成海报，生成邀请码，邀请一人下单，可得下单20%佣金！',
				  success: function (res) {
				    if (res.confirm) {
				      sheep.$router.go('/pages/commission/index');
				    }
				  },
				});
			},
			workerList() {
				sheep.$router.go('/pages/worker/workerList/index');
			},
			youhuiquan() {
				sheep.$router.go('/pages/coupon/list',{type: 'all'});
			},
			wallet() {
				sheep.$router.go('/pages/user/wallet/money')
			},
			point() {
				sheep.$router.go('/pages/user/wallet/score')
			},
			sign() {
				sheep.$router.go('/pages/app/sign')
			},
			toGift() {
				sheep.$router.go('/pages/reward/list')
			},
			toTrend() {
				sheep.$router.go('/pages/trend/my/list')
			},
			reward() {
				sheep.$router.go('/pages/reward/list')
			},
			// 复制
			onCopy(text) {
			  if(text){
				  sheep.$helper.copyText(text+"");
			  }
			},
			toChat() {
				//sheep.$router.go('/pages/chat/index');
				uni.showModal({
				  title: '联系客服',
				  content: '客服微信：rbtnet',
				  success: function (res) {
				   
				  },
				});
			},
			toKaidian() {
				uni.showModal({
				  title: '搭建同款',
				  content: '搭建同款请联系客服微信：rbtnet',
				  success: function (res) {
				   
				  },
				});
			},
			async editUser() {
				if(!this.friendEnabled){
					sheep.$router.go('/pages/user/info')
					return;
				}
				
				if(this.isLogin){
					if(this.isPass){
						await sheep.$store('user').getInfo();
						showAuthModal('chatAuthorization');
					}
				}else{
					showAuthModal();
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main-box {
		margin-top: 300rpx;
		background-color: #fafafa;
		position: absolute;
		left: 0px;
		right: 0px;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		
		.info-box {
			//background-color: #fff;
			padding: 15px;
			border-top-left-radius: 10px;
			border-top-right-radius: 10px;
			padding-bottom: 0;
		}
		
		.avatar-box {
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;
			
			.nickname-box {
				display: flex;
				flex: 1;
				flex-direction: column;
				justify-content: center;
				margin-left: 10px;
				
				.vip-box {
					display: flex;
					align-items: center;
					
					.nickname {
						font-size: 15px;
						font-weight: bold;
					}
					
					.vip-img {
						width: 38rpx;
						height: 38rpx;
						margin-left: 5px;
					}
				}
				
				.id-box {
					margin: 5px 0;
					font-size: 12px;
					color: #aaa;
					
					.text {
						margin-right: 5px;
					}
				}
				
				.tag-box {
					display: flex;
					align-items: center;
					
					.tag-btn {
						background-color: #efe4e4;
						border-radius: 10px;
						padding: 3px 5px;
						font-size: 10px;
						margin-right: 7px;
						display: flex;
						align-items: center;
						justify-content: center;
						
						.icon-img {
							width: 12px;
							height: 12px;
							margin-right: 2px;
						}
					}
				}
			}
		}
		
		.fans-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx 0;
			padding-top: 0;
			
			.tag {
				display: flex;
				justify-content: center;
				flex: 1;
				flex-direction: column;
				align-items: center;
				font-size: 24rpx;
				color: #303133;
				
				.tag-num {
					margin-bottom: 5px;
					font-size: 32rpx;
					color: #303133;
				}
			}
		}
		
	}
	
	
	.card-box {
		background-color: #fff;
		margin: 30rpx;
		margin-top: 0;
		border-radius: 10px;
		padding-bottom: 0;
		
		.title {
			font-size: 15px;
			font-weight: bolder;
			padding: 38rpx 0 10rpx 40rpx;
			color: #1f2122;
		}
		
		.card-item {
			display: flex;
			flex-wrap: wrap;
			
			.item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 25%;
				padding: 30rpx 0;
				position: relative;
				
				.name {
					margin-top: 10rpx;
					font-size: 11px;
					color: #333;
				}
			}
		}
	}
	 
	.swiper-box {
		height: 320rpx;
	}
</style>